.page-header {
  @media (min-width: $tablet-width) {
    inline-size: 708px;
    margin-inline: auto;
  }

  @media (min-width: $desktop-width) {
    inline-size: 1220px;
  }
}

.page-header__logo {
  &:hover {
    opacity: 0.8;
  }
  &:active {
    opacity: 0.6;
  }
}

.page-header__nav {
  @media (min-width: $tablet-width) {
    display: flex;
    justify-content: space-between;
    padding-block-start: 24px;
  }

  @media (min-width: $desktop-width) {
    padding-block-start: 53px;
  }
}

.page-header__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;


  @media (max-width: $mobile-width-only) {
    min-inline-size: 320px;
    margin-inline: auto;
    padding-inline: 20px;
    padding-block: 10px 18px;
  }

  @media (min-width: $tablet-width) {
    inline-size: 174px;

  }

  @media (min-width: $desktop-width) {
    inline-size: 202px;
  }
}

.page-header__toggle {
  position: relative;
  display: block;
  inline-size: 24px;
  block-size: 16px;
  padding: 0;
  border: none;
  background-color: $white;

  @media (min-width: $tablet-width) {
    display: none;
  }
}

.page-header__nav--closed .page-header__toggle::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  inline-size: 24px;
  block-size: 3px;
  background-color: $black;
  box-shadow: 0 8px 0 0 $black, 0 16px 0 0 $black;

}

.page-header__nav--opened .page-header__toggle::before,
.page-header__nav--opened .page-header__toggle::after {
  position: absolute;
  content: "";
  top: 6px;
  left: 0;
  inline-size: 24px;
  block-size: 3px;
  transform: rotate(45deg);
  background-color: $black;
  box-shadow: none;
}

.page-header__nav--opened .page-header__toggle::before {
  transform: rotate(-45deg);
  box-shadow: none;
}

.page-header__menu {
  margin: 0;
}

@media (max-width: $mobile-width-only) {
  .page-header__nav--closed .page-header__menu {
    display: none;
  }

  .page-header__nav--opened .page-header__menu {
    display: block;
    position: absolute;
    z-index: 5;
    inline-size: 100%;
  }
}